<template>
  <div>
    <template>
      <div id="root">产品管理 > 产品推荐管理</div>
      <el-form
          :inline="true"
          :model="queryForm"
          ref="queryForm"
          class="demo-form-inline"
      >
        <el-form-item label="" prop="prodName">
          <el-input
              v-model="queryForm.prodName"
              placeholder="系列名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="exequery()">查询</el-button>
          <el-button @click="resetForm('queryForm')">重置</el-button>
          <el-button type="primary" @click="toAdd()">添加</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="prodId" label="产品编号" width="180">
        </el-table-column>
        <el-table-column prop="prodName" label="产品名称" width="180">
        </el-table-column>
        <el-table-column prop="prodReco" label="推荐度" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.prodReco == '热门推荐'">
              <el-tag type="success">热门推荐</el-tag>
            </span>
            <span v-if="scope.row.prodReco == '普通推荐'">
              <el-tag type="danger">普通推荐</el-tag>
            </span>
            <span v-if="scope.row.prodReco == '下架退市'">
              <el-tag type="danger">下架退市</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="prodFirst" label="是否首发" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.prodFirst == 0">
              <el-tag type="success">是</el-tag>
            </span>
            <span v-if="scope.row.prodFirst == 1">
              <el-tag type="danger">否</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="onlineSub" label="是否开启线上申购" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.onlineSub == 0">
              <el-tag type="success">是</el-tag>
            </span>
            <span v-if="scope.row.onlineSub == 1">
              <el-tag type="danger">否</el-tag>
            </span>
          </template></el-table-column
        >
        <el-table-column
            prop="prodisvisible"
            label="是否投顾端可见"
            width="180"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.prodisvisible == 0">
              <el-tag type="success">是</el-tag>
            </span>
            <span v-if="scope.row.prodisvisible == 1">
              <el-tag type="danger">否</el-tag>
            </span>
          </template></el-table-column
        >
        <el-table-column prop="prodReason" label="推荐原因" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="toEdit(scope.$index, scope.row)"
            >修改</el-button
            >
            <el-button size="mini"
                type="success"
                @click="toRelevance(scope.$index, scope.row)"
            >关联申购</el-button
            ><el-button size="mini"
              type="primary"
              @click="toDelete(scope.$index, scope.row)"
          >删除</el-button
          >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.totalNum"
      >
      </el-pagination>
      <!-- 增加对话框 -->
      <el-dialog title="增加" :visible.sync="addDialogFormVisible">
        <el-form :model="addForm">
          <el-form-item label="推荐产品" :label-width="formLabelWidth">
            <el-select v-model="addForm.prodName" placeholder="请选择">
              <el-option
                  :key="queryProd.prodId"
                  :label="queryProd.prodName"
                  :value="queryProd.prodName"
                  v-for="queryProd in queryFormProd"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="推荐度" :label-width="formLabelWidth">
            <el-select v-model="addForm.prodReco" placeholder="基金">
              <!-- 0热门推荐 1 普通推荐 -->
              <el-option label="热门推荐" value="热门推荐">热门推荐</el-option>
              <el-option label="普通推荐" value="普通推荐">普通推荐</el-option>
              <el-option label="下架退市" value="下架退市">下架退市</el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="是否投顾端可见:">
            <el-radio-group v-model="addForm.prodisvisible">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="是否首发：">
            <el-radio-group v-model="addForm.prodFirst">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="线上申购开启：">
            <el-radio-group v-model="addForm.onlineSub">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="推荐理由" :label-width="formLabelWidth">
            <el-input
                v-model="addForm.prodReason"
                autocomplete="off"
                placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="executeAdd()">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 修改对话框 -->
      <el-dialog title="修改" :visible.sync="editDialogFormVisible">
        <el-form :model="editForm">
          <el-form-item label="推荐产品" :label-width="formLabelWidth">
            <el-select v-model="editForm.prodName" placeholder="产品列表">
              <el-option :value="editForm.prodName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="推荐度" :label-width="formLabelWidth">
            <el-select v-model="editForm.prodReco" placeholder="基金">
              <!-- 0热门推荐 1 普通推荐 2下架退市-->
              <el-option label="热门推荐" value="热门推荐">热门推荐</el-option>
              <el-option label="普通推荐" value="普通推荐">普通推荐</el-option>
              <el-option label="下架退市" value="下架退市">下架退市</el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="是否投顾端可见:">
            <el-radio-group v-model="editForm.prodisvisible">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="是否首发：">
            <el-radio-group v-model="editForm.prodFirst">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="线上申购开启：">
            <el-radio-group v-model="editForm.onlineSub">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="推荐理由" :label-width="formLabelWidth">
            <el-input
                v-model="editForm.prodReason"
                autocomplete="off"
                placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="executeEdit()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 关联模板 -->
      <el-dialog title="关联模板" :visible.sync="relateDialogFormVisible">
        <el-form>
          <template>
            <el-transfer
                style="text-align: left; display: inline-block"
                v-model="value"
                :data="queryRelevanceList"
                :titles="['未关联', '关联']"
                :props="{
                key: 'prodId',
                label: 'prodName',
              }">
            </el-transfer>

            <el-button @click="relateDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="relateOpreation()">确 定</el-button>
          </template>
        </el-form>
      </el-dialog>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryRelevanceList: [{ prodId: "", prodName: "" }],
      value: [],
      relateDialogFormVisible: false,
      tableData: [],
      pageInfo: {
        page: 1,
        pageSize: 5,
        totalNum: 10,
      },
      queryFormProd: [],
      queryForm: {
        prodName: "",
      },

      editDialogFormVisible: false,
      editForm: {
        prodId: "",
        prodName: "",
        prodReco: "",
        prodFirst: "",
        onlineSub: "",
        prodisvisible: "",
        prodReason: "",
      },
      addDialogFormVisible: false,
      addForm: {
        prodId: "",
        prodName: "",
        prodReco: "",
        prodFirst: "",
        onlineSub: "",
        prodisvisible: "",
        prodReason: "",
      },
      formLabelWidth: "120px",
      relevance: [],
      reqdata: "",
    };
  },
  methods: {
    queryRelevanceValue(reqData) {
      this.$axios
          .post("/recommend/Relevance", reqData)
          .then((resp) => {
            console.log(resp);
            this.value = resp.data.returnData;
            console.log(this.value);
          })
          .catch((error) => {
            console.log(error);
          });
    },
    relateOpreation() {
      this.relateDialogFormVisible = false;
      var reqUrl = "/recommend/addRelevance";
      var valueStr = this.value.join(",");
      var reqData = "relevance=" + valueStr + "&" + this.reqdata;

      console.log(reqData);
      this.operateCUD(reqUrl, reqData);
    },
    queryRelevance(reqData) {
      this.$axios
          .post("/recommend/queryRelevance", reqData)
          .then((resp) => {
            console.log(resp);
            this.queryRelevanceList = resp.data.returnData.queryRelevanceList;
            console.log(this.value);
          })
          .catch((error) => {
            console.log(error);
          });
    },

    toRelevance(index, row) {
      console.log(index, row);
      this.relateDialogFormVisible = true;
      this.reqdata =
          "parentId=" + row.parentId + "&" + ("prodId=" + row.prodId);
      console.log(this.reqdata);
      //查询
      this.queryRelevance(this.reqdata);
      this.queryRelevanceValue(this.reqdata);
    },

    toDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            var reqUrl = "/recommend/delete";
            var reqData = "prodId=" + row.prodId;
            console.log(reqData);
            this.operateCUD(reqUrl, reqData);
            this.queryAllProd("page=1&pageSize=5&prodName=");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
    },
    queryProd() {
      this.$axios
          .post("/recommend/queryProd", "")
          .then((resp) => {
            console.log(resp);
            this.queryFormProd = resp.data.returnData;
          })
          .catch((error) => {
            console.log(error);
          });
    },

    executeAdd() {
      this.addDialogFormVisible = false;
      var reqUrl = "/recommend/addProd";
      var reqData = this.$qs.stringify(this.addForm);
      console.log(reqData);
      this.operateCUD(reqUrl, reqData);
    },
    toAdd() {
      this.addDialogFormVisible = true;
      this.addForm = {};
    },
    executeEdit() {
      this.editDialogFormVisible = false;
      var reqUrl = "/recommend/edit";
      var reqData = this.$qs.stringify(this.editForm);
      console.log(reqData);
      this.operateCUD(reqUrl, reqData);
    },
    toEdit(index, row) {
      console.log(index, row);
      this.editDialogFormVisible = true;
      //用户编号
      var reqData = "prodId=" + row.prodId;
      //查询要修改的数据
      this.queryByProdId(reqData);
    },
    queryByProdId(reqData) {
      this.$axios
          .post("/recommend/toEdit", reqData)
          .then((resp) => {
            console.log(resp);
            this.editForm = resp.data.returnData;
          })
          .catch((error) => {
            console.log(error);
          });
    },
    operateCUD(reqUrl, reqData) {
      this.$axios
          .post(reqUrl, reqData)
          .then((resp) => {
            console.log(resp);
            if (resp.data.returnCode == 202) {
              this.$message({
                showClose: true,
                message: resp.data.returnMsg,
                type: "success",
              });
            } else if (resp.data.returnCode == 402) {
              this.$message({
                showClose: true,
                message: resp.data.returnMsg,
                type: "error",
              });
            }
            var reqData =
                this.$qs.stringify(this.queryForm) +
                "&" +
                this.$qs.stringify(this.pageInfo);
            this.queryAllProd(reqData);
            this.queryProd();
            console.log(reqData);
          })
          .catch((error) => {
            console.log(error);
          });
    },
    exequery() {
      var reqData = this.$qs.stringify(this.queryForm);
      console.log(reqData);
      this.queryAllProd(reqData);
    },
    resetForm(queryForm) {
      this.$refs[queryForm].resetFields();
      this.queryAllProd("page=1&pageSize=5&prodName=");
    },
    onSubmit() {
      console.log("submit!");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageInfo.page = 1;
      this.pageInfo.pageSize = val;
      var reqData =
          this.$qs.stringify(this.pageInfo) +
          "&" +
          this.$qs.stringify(this.queryForm);
      console.log(reqData);
      this.queryAllProd(reqData);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageInfo.page = val;
      var reqData =
          this.$qs.stringify(this.pageInfo) +
          "&" +
          this.$qs.stringify(this.queryForm);
      console.log(reqData);
      this.queryAllProd(reqData);
    },

    queryAllProd(reqData) {
      this.$axios
          .post("/recommend/query", reqData)
          .then((resp) => {
            console.log(resp);
            this.tableData = resp.data.returnData.prodList;
            this.pageInfo = resp.data.returnData.pageInfo;
          })
          .catch((error) => {
            console.log(error);
          });
    },
  },
  mounted() {
    this.queryAllProd("page=1&pageSize=5&prodName=");
    this.queryProd();
  },
};
</script>
<style>
#root {
  text-align: left;
}
div > .el-dialog {
  width: 38%;
}
div>.el-dialog__body{
  padding: 30px 31px;
}
</style>